
  @layer utilities {
    .board-grid {
      background-image: linear-gradient(to right, theme('colors.primary') 1px, transparent 1px),
                      linear-gradient(to bottom, theme('colors.primary') 1px, transparent 1px);
    }
    .piece-shadow {
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .piece-hover {
      transition: all 0.2s ease;
    }
    .piece-hover:hover {
      transform: scale(1.05);
    }
    .btn-game {
      @apply bg-primary hover:bg-primary/80 text-white font-bold py-2 px-4 rounded transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50;
    }
    .game-container {
      @apply max-w-4xl mx-auto px-4 py-8;
    }
    .game-header {
      @apply text-center mb-6;
    }
    .game-title {
      @apply text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary mb-2;
    }
    .game-status {
      @apply text-[clamp(1rem,2vw,1.25rem)] font-medium mb-4;
    }
    .game-controls {
      @apply flex justify-center gap-4 mb-6;
    }
    .board-container {
      @apply relative mx-auto flex justify-center;
    }
    .board {
      @apply relative rounded-xl shadow-xl overflow-hidden mx-auto;
    }
    .piece {
      @apply absolute rounded-full transform -translate-x-1/2 -translate-y-1/2 cursor-pointer piece-shadow;
    }
    .black-piece {
      @apply bg-black;
    }
    .white-piece {
      @apply bg-white border border-gray-300;
    }
    .winner-animation {
      animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.6;
      }
    }
    .preview-piece {
      @apply absolute rounded-full transform -translate-x-1/2 -translate-y-1/2 opacity-40 pointer-events-none;
    }
  }
